import { CheckOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons'
import { Flex, InputNumber, Popconfirm, Select, Space, TableColumnsType, Tag, Tooltip, Typography } from 'antd'
import type {
  IPresetAttrTableData,
  ReorderCategoryDelayDaysConfigVO,
  ReorderDisplayConfigVO,
  ReorderPeriodConfigVO,
} from './types'
export const useCycleColumns = ({
  tableData,
  settableData,
  onSave,
  reLoadPage,
  canEdit,
}: {
  tableData: ReorderPeriodConfigVO[]
  settableData: React.Dispatch<React.SetStateAction<ReorderPeriodConfigVO[]>>
  onSave: (info: ReorderPeriodConfigVO) => void
  reLoadPage: () => void
  canEdit: boolean
}): TableColumnsType<ReorderPeriodConfigVO> => [
  {
    title: '商品年份',
    dataIndex: 'productYear',
    key: 'productYear',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '大类',
    dataIndex: 'largeClassName',
    key: 'largeClassName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '中类',
    dataIndex: 'midClassName',
    key: 'midClassName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '小类',
    dataIndex: 'smallClassName',
    key: 'smallClassName',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '细类',
    dataIndex: 'fineClassName',
    key: 'fineClassName',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
    key: 'productName',
    width: 120,
    align: 'center',
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="topLeft" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: '颜色',
    dataIndex: 'colorName',
    key: 'colorName',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '商品等级',
    dataIndex: 'productLevelName',
    key: 'productLevelName',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '季节分组',
    dataIndex: 'seasonClassifyName',
    key: 'seasonClassifyName',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '采购渠道',
    dataIndex: 'purchaseType',
    key: 'purchaseType',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '成衣供应商',
    dataIndex: 'supplierName',
    key: 'supplierName',
    width: 100,
    align: 'center',
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="topLeft" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: '成品起订量',
    dataIndex: 'minOrderQuantity',
    key: 'minOrderQuantity',
    width: 150,
    align: 'center',
    render: (info, rows, index) => {
      return canEdit ? (
        <Space size={'large'}>
          {!rows.isEdit ? (
            <Tooltip placement="top" title="编辑">
              <span>{info || '-'}</span>
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', margin: '0 6px' }}
                onClick={() => {
                  if (!rows.isEdit) {
                    tableData[index]['isEdit'] = true
                    settableData([...tableData])
                  }
                }}
              />
            </Tooltip>
          ) : (
            <Space>
              <InputNumber
                value={info || 0}
                precision={0}
                min={1}
                onChange={(val) => {
                  tableData[index].minOrderQuantity = val
                  settableData([...tableData])
                }}
              ></InputNumber>
              <Tooltip placement="top" title="保存">
                <CheckOutlined
                  style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                  onClick={() => {
                    if (rows.isEdit) {
                      tableData[index]['isEdit'] = false
                      settableData([...tableData])
                      onSave(tableData[index])
                    }
                  }}
                />
              </Tooltip>
              <Tooltip placement="top" title="取消">
                <CloseOutlined
                  style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                  onClick={() => {
                    tableData[index]['isEdit'] = false
                    settableData([...tableData])
                    reLoadPage()
                  }}
                />
              </Tooltip>
            </Space>
          )}
        </Space>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '起订量备注',
    dataIndex: 'minOrderRemark',
    key: 'minOrderRemark',
    width: 100,
    align: 'center',
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="topLeft" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: '面料是否集约',
    dataIndex: 'intensiveStatus',
    key: 'intensiveStatus',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '面料名称',
    dataIndex: 'fabricName',
    key: 'fabricName',
    width: 120,
    align: 'center',
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="topLeft" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: '七色纺色号',
    dataIndex: 'qsfColorNum',
    key: 'qsfColorNum',
    width: 120,
    align: 'center',
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="topLeft" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: '返单周期',
    dataIndex: 'reorderDayNum',
    key: 'reorderDayNum',
    width: 100,
    align: 'center',
    render: (info, rows, index) => {
      return canEdit ? (
        <Space size={'large'}>
          {!rows.isEditDay ? (
            <Tooltip placement="top" title="编辑">
              <span>{info ? info + '天' : '-'}</span>
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', margin: '0 6px' }}
                onClick={() => {
                  if (!rows.isEditDay) {
                    tableData[index]['isEditDay'] = true
                    settableData([...tableData])
                  }
                }}
              />
            </Tooltip>
          ) : (
            <Space>
              <span>{info ? info + '天' : '-'}</span>
              <Tooltip placement="top" title="保存">
                <CheckOutlined
                  style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                  onClick={() => {
                    if (rows.isEditDay) {
                      tableData[index]['isEditDay'] = false
                      settableData([...tableData])
                      onSave(tableData[index])
                    }
                  }}
                />
              </Tooltip>
              <Tooltip placement="top" title="取消">
                <CloseOutlined
                  style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                  onClick={() => {
                    tableData[index]['isEditDay'] = false
                    settableData([...tableData])
                    reLoadPage()
                  }}
                />
              </Tooltip>
            </Space>
          )}
        </Space>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '纱时间',
    dataIndex: 'yarnDayNum',
    key: 'yarnDayNum',
    width: 100,
    align: 'center',
    render: (info, rows, index) => {
      return (
        <Space size={'large'}>
          {!rows.isEditDay ? (
            <span>{info || '-'}</span>
          ) : (
            <div style={{ margin: '0 6px' }}>
              <InputNumber
                value={info || 0}
                precision={0}
                min={1}
                onChange={(val) => {
                  tableData[index].yarnDayNum = val
                  settableData([...tableData])
                }}
              ></InputNumber>
            </div>
          )}
        </Space>
      )
    },
  },
  {
    title: '胚时间',
    dataIndex: 'blankDayNum',
    key: 'blankDayNum',
    width: 100,
    align: 'center',
    render: (info, rows, index) => {
      return (
        <Space size={'large'}>
          {!rows.isEditDay ? (
            <span>{info || '-'}</span>
          ) : (
            <div style={{ margin: '0 6px' }}>
              <InputNumber
                value={info || 0}
                precision={0}
                min={1}
                onChange={(val) => {
                  tableData[index].blankDayNum = val
                  settableData([...tableData])
                }}
              ></InputNumber>
            </div>
          )}
        </Space>
      )
    },
  },
  {
    title: '色时间',
    dataIndex: 'colorDayNum',
    key: 'colorDayNum',
    width: 100,
    align: 'center',
    render: (info, rows, index) => {
      return (
        <Space size={'large'}>
          {!rows.isEditDay ? (
            <span>{info || '-'}</span>
          ) : (
            <div style={{ margin: '0 6px' }}>
              <InputNumber
                value={info || 0}
                precision={0}
                min={1}
                onChange={(val) => {
                  tableData[index].colorDayNum = val
                  settableData([...tableData])
                }}
              ></InputNumber>
            </div>
          )}
        </Space>
      )
    },
  },
  {
    title: '是否备胚',
    dataIndex: 'preBlankType',
    key: 'preBlankType',
    width: 100,
    align: 'center',
    render: (info, rows, index) => {
      return (
        <Space size={'large'}>
          {!rows.isEditDay ? (
            <span>{info || '-'}</span>
          ) : (
            <div style={{ margin: '0 6px' }}>
              <Select
                options={[
                  { label: '是', value: '是' },
                  { label: '否', value: '否' },
                ]}
                value={info}
                onChange={(val) => {
                  tableData[index].preBlankType = val
                  settableData([...tableData])
                }}
              ></Select>
            </div>
          )}
        </Space>
      )
    },
  },
  {
    title: '是否备色',
    dataIndex: 'preColorType',
    key: 'preColorType',
    width: 100,
    align: 'center',
    render: (info, rows, index) => {
      return (
        <Space size={'large'}>
          {!rows.isEditDay ? (
            <span>{info || '-'}</span>
          ) : (
            <div style={{ margin: '0 6px' }}>
              <Select
                options={[
                  { label: '是', value: '是' },
                  { label: '否', value: '否' },
                ]}
                value={info}
                onChange={(val) => {
                  tableData[index].preColorType = val
                  settableData([...tableData])
                }}
              ></Select>
            </div>
          )}
        </Space>
      )
    },
  },
  {
    title: '面料运输时间',
    dataIndex: 'fabricDeliverDayNum',
    key: 'fabricDeliverDayNum',
    width: 100,
    align: 'center',
    render: (info, rows, index) => {
      return (
        <Space size={'large'}>
          {!rows.isEditDay ? (
            <span>{info || '-'}</span>
          ) : (
            <div style={{ margin: '0 6px' }}>
              <InputNumber
                value={info || 0}
                precision={0}
                min={1}
                onChange={(val) => {
                  tableData[index].fabricDeliverDayNum = val
                  settableData([...tableData])
                }}
              ></InputNumber>
            </div>
          )}
        </Space>
      )
    },
  },
  {
    title: '生产时间',
    dataIndex: 'produceDayNum',
    key: 'produceDayNum',
    width: 100,
    align: 'center',
    render: (info, rows, index) => {
      return (
        <Space size={'large'}>
          {!rows.isEditDay ? (
            <span>{info || '-'}</span>
          ) : (
            <div style={{ margin: '0 6px' }}>
              <InputNumber
                value={info || 0}
                precision={0}
                min={1}
                onChange={(val) => {
                  tableData[index].produceDayNum = val
                  settableData([...tableData])
                }}
              ></InputNumber>
            </div>
          )}
        </Space>
      )
    },
  },
  {
    title: '物流时间',
    dataIndex: 'deliverDayNum',
    key: 'deliverDayNum',
    width: 100,
    align: 'center',
    render: (info, rows, index) => {
      return (
        <Space size={'large'}>
          {!rows.isEditDay ? (
            <span>{info || '-'}</span>
          ) : (
            <div style={{ margin: '0 6px' }}>
              <InputNumber
                value={info || 0}
                precision={0}
                min={1}
                onChange={(val) => {
                  tableData[index].deliverDayNum = val
                  settableData([...tableData])
                }}
              ></InputNumber>
            </div>
          )}
        </Space>
      )
    },
  },
  {
    title: '更新人',
    dataIndex: 'updateUserName',
    key: 'updateUserName',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
]
export const useDisplayColumns = ({
  tableData,
  settableData,
  onSave,
  reLoadPage,
  canEdit,
}: {
  tableData: ReorderDisplayConfigVO[]
  settableData: React.Dispatch<React.SetStateAction<ReorderDisplayConfigVO[]>>
  onSave: (info: ReorderDisplayConfigVO) => void
  reLoadPage: () => void
  canEdit: boolean
}): TableColumnsType<IPresetAttrTableData> => [
  {
    title: '大类',
    dataIndex: 'largeClassName',
    key: 'largeClassName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '中类',
    dataIndex: 'midClassName',
    key: 'midClassName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '小类',
    dataIndex: 'smallClassName',
    key: 'smallClassName',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '细类',
    dataIndex: 'fineClassName',
    key: 'fineClassName',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '单店SKC基础陈列量',
    dataIndex: 'shopSkcDisplayQuantity',
    key: 'shopSkcDisplayQuantity',
    width: 100,
    align: 'center',
    render: (info, rows, index) => {
      return canEdit ? (
        <Space size={'large'}>
          {!rows.isEdit ? (
            <Tooltip placement="top" title="编辑">
              <span>{info || '-'}</span>
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', margin: '0 6px' }}
                onClick={() => {
                  if (!rows.isEdit) {
                    tableData[index]['isEdit'] = true
                    settableData([...tableData])
                  }
                }}
              />
            </Tooltip>
          ) : (
            <Space>
              <div style={{ marginLeft: 16, marginRight: 16 }}>
                <InputNumber
                  defaultValue={info || ''}
                  precision={0}
                  min={1}
                  onChange={(val) => {
                    tableData[index].shopSkcDisplayQuantity = val
                    settableData([...tableData])
                  }}
                ></InputNumber>
              </div>
              <Tooltip placement="top" title="保存">
                <CheckOutlined
                  style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                  onClick={() => {
                    if (rows.isEdit) {
                      tableData[index]['isEdit'] = false
                      settableData([...tableData])
                      onSave(tableData[index])
                    }
                  }}
                />
              </Tooltip>
              <Tooltip placement="top" title="取消">
                <CloseOutlined
                  style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                  onClick={() => {
                    tableData[index]['isEdit'] = false
                    settableData([...tableData])
                    reLoadPage()
                  }}
                />
              </Tooltip>
            </Space>
          )}
        </Space>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '更新人',
    dataIndex: 'updateUserName',
    key: 'updateUserName',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
]
export const useLatestColumns = ({
  tableData,
  settableData,
  onSave,
  reLoadPage,
  settimeModalShow,
  setCurrentInfo,
  canEdit,
}: {
  tableData: ReorderCategoryDelayDaysConfigVO[]
  settableData: React.Dispatch<React.SetStateAction<ReorderCategoryDelayDaysConfigVO[]>>
  onSave: (info: ReorderCategoryDelayDaysConfigVO) => void
  reLoadPage: () => void
  settimeModalShow: React.Dispatch<React.SetStateAction<boolean>>
  setCurrentInfo: React.Dispatch<React.SetStateAction<ReorderCategoryDelayDaysConfigVO>>
  canEdit: boolean
}): TableColumnsType<ReorderCategoryDelayDaysConfigVO> => [
  {
    title: '年份',
    dataIndex: 'productYear',
    key: 'productYear',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '大类',
    dataIndex: 'largeClassName',
    key: 'largeClassName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '季节分组',
    dataIndex: 'seasonClassifyName',
    key: 'seasonClassifyName',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '最晚到货时间',
    dataIndex: 'lastDay',
    key: 'lastDay',
    width: 100,
    align: 'center',
    render: (info, rows) => {
      return (
        <div>
          <span>{info}</span>
          {canEdit ? (
            <EditOutlined
              style={{ color: 'var(--primary-color)', cursor: 'pointer', margin: '0 6px' }}
              onClick={() => {
                settimeModalShow(true)
                setCurrentInfo(rows)
              }}
            />
          ) : (
            ''
          )}
        </div>
      )
    },
  },
  {
    title: '到货异常天数',
    dataIndex: 'delayDayNum',
    key: 'delayDayNum',
    width: 100,
    align: 'center',
    render: (info, rows, index) => {
      return canEdit ? (
        <Space size={'large'}>
          {!rows.isEdit ? (
            <Tooltip placement="top" title="编辑">
              <span>{info}天</span>
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', margin: '0 6px' }}
                onClick={() => {
                  if (!rows.isEdit) {
                    tableData[index]['isEdit'] = true
                    settableData([...tableData])
                  }
                }}
              />
            </Tooltip>
          ) : (
            <Space>
              <div style={{ marginLeft: 16, marginRight: 16 }}>
                <InputNumber
                  defaultValue={info || ''}
                  precision={0}
                  min={1}
                  onChange={(val) => {
                    tableData[index].delayDayNum = val
                    settableData([...tableData])
                  }}
                ></InputNumber>
              </div>
              <Tooltip placement="top" title="保存">
                <CheckOutlined
                  style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                  onClick={() => {
                    if (rows.isEdit) {
                      tableData[index]['isEdit'] = false
                      settableData([...tableData])
                      onSave(tableData[index])
                    }
                  }}
                />
              </Tooltip>
              <Tooltip placement="top" title="取消">
                <CloseOutlined
                  style={{ color: 'var(--primary-color)', cursor: 'pointer' }}
                  onClick={() => {
                    tableData[index]['isEdit'] = false
                    settableData([...tableData])
                    reLoadPage()
                  }}
                />
              </Tooltip>
            </Space>
          )}
        </Space>
      ) : (
        info || '-'
      )
    },
  },
  {
    title: '更新人',
    dataIndex: 'updateUserName',
    key: 'updateUserName',
    width: 100,
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
]
